<template>
  <div>
    <!-- 头部 --start-->
    <div class="nav">
      <p v-if="id==0">
        <span>.</span> 新增员工
      </p>
      <p v-else>
        <span>.</span> 员工详情
      </p>
      <div id="nav_go5">
        <el-button type="info" icon="el-icon-back" class="btn_fanhui" @click="revert(5,4)">返回</el-button>
      </div>
    </div>
    <!-- 头部 --end-->
    <!-- 新增&&编辑员工 -- start-->
    <div class="contaner_staff">
      <div id="head_portrait">
        <!-- 头像 --start-->
        <div class="log">
          <el-upload
            class="avatar-uploader"
            action="/apis/ComApi.asmx/UpImg"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar"/>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
        <!-- 头像 --end-->
        <div id="log_bottom1">
          <el-select
            v-model="departName"
            placeholder="请选择部门"
            style="width:70%"
            @change="departChange"
          >
            <el-option
              v-for="item in departList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <el-select v-model="postName" placeholder="请选择岗位" style="width:70%" @change="postChange">
            <el-option
              v-for="item in postList"
              :key="item.id"
              :label="item.roleName"
              :value="item.id"
            ></el-option>
          </el-select>
          <el-select v-model="jiXiao" placeholder="请选择绩效系数" style="width:70%">
            <el-option
              v-for="item in coefficientvalue"
              :key="item.key"
              :label="item.value"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
      </div>

      <div id="table_box44">
        <div class="basemess">
          <table width="100%" height="100%">
            <!-- <tr>
              <td width="100%" colspan="10">员工信息</td>
            </tr>-->
            <tr>
              <td width="10%" colspan="1">姓名</td>
              <td width="24%" colspan="3">
                <el-input v-model="name"></el-input>
              </td>
              <td width="10%" colspan="1">性别</td>
              <td width="23%" colspan="2">
                <el-select v-model="sexVal" placeholder="请选择性别" @change="sexChange">
                  <el-option
                    v-for="item in sexvalue"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </td>
              <td width="10%" colspan="1">民族</td>
              <td width="23%" colspan="2">
                <el-select v-model="nation" filterable placeholder="请选择民族">
                  <el-option
                    v-for="item in nationvalue"
                    :key="item.value"
                    :label="item.label"
                    :value="item.label"
                  ></el-option>
                </el-select>
              </td>
            </tr>
            <tr>
              <td width="10%" colspan="1">出生年月</td>
              <td width="24%" colspan="3">
                <el-date-picker v-model="birth" type="date" placeholder @change="dateofbirthfn()"></el-date-picker>
              </td>
              <td width="10%" colspan="1">籍贯</td>
              <td width="23%" colspan="2">
                <el-input v-model="nativePlace"></el-input>
              </td>
              <td width="10%" colspan="1">婚姻状况</td>
              <td width="23%" colspan="2">
                <el-select v-model="marrayVal" placeholder="请选择婚姻状况" @change="marryChange">
                  <el-option
                    v-for="item in marriagevalue"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </td>
            </tr>
            <tr>
              <td width="10%" colspan="1">联系电话</td>
              <td width="24%" colspan="3">
                <el-input v-model="telephone"></el-input>
              </td>
              <td width="10%" colspan="1">身份证号码</td>
              <td width="23%" colspan="2">
                <el-input v-model="idNumber"></el-input>
              </td>
              <td width="10%" colspan="1">角色分配</td>
              <td width="23%" colspan="2">
                <el-select v-model="roleName" multiple placeholder="请选择角色" @change="roleChange">
                  <el-option
                    v-for="item in roleList"
                    :key="item.id"
                    :label="item.roleName"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </td>
            </tr>
            <tr>
              <td width="10%" colspan="1">户籍地址</td>
              <td width="90%" colspan="9">
                <el-input v-model="permanentaddress"></el-input>
              </td>
            </tr>
            <tr>
              <td width="10%" colspan="1">现住址</td>
              <td width="90%" colspan="9">
                <el-input v-model="addressnow"></el-input>
              </td>
            </tr>

            <tr>
              <td width="10%" colspan="1">专业社会职称</td>
              <td width="24%" colspan="3">
                <el-input v-model="sociology"></el-input>
              </td>
              <td width="10%" colspan="1">取得时间</td>
              <td width="23%" colspan="2">
                <el-date-picker v-model="getdate" type="date" placeholder @change="getdatefn()"></el-date-picker>
              </td>
              <td width="10%" colspan="1">最高学历</td>
              <td width="23%" colspan="2">
                <el-input v-model="educationMax"></el-input>
              </td>
            </tr>
            <tr>
              <td width="10%" colspan="1">毕业院校</td>
              <td width="24%" colspan="3">
                <el-input v-model="graduateUniversity"></el-input>
              </td>
              <td width="10%" colspan="1">专业</td>
              <td width="23%" colspan="2">
                <el-input v-model="major"></el-input>
              </td>
              <td width="10%" colspan="1">毕业时间</td>
              <td width="23%" colspan="2">
                <el-date-picker
                  v-model="graduateDate"
                  type="date"
                  placeholder
                  @change="graduationtimefn()"
                ></el-date-picker>
              </td>
            </tr>
            <tr>
              <td width="10%" colspan="1">外语水平</td>
              <td width="24%" colspan="3">
                <el-input v-model="languagegrade"></el-input>
              </td>
              <td width="10%" colspan="1">语种</td>
              <td width="23%" colspan="2">
                <el-input v-model="language"></el-input>
              </td>
              <td width="10%" colspan="1">计算机水平</td>
              <td width="23%" colspan="2">
                <el-input v-model="computer"></el-input>
              </td>
            </tr>
            <tr>
              <td width="10%" colspan="1">签订合同时间</td>
              <td width="24%" colspan="3">
                <el-date-picker
                  v-model="laborcontractStart"
                  type="date"
                  placeholder
                  @change="signingtimefn()"
                ></el-date-picker>
              </td>
              <td width="10%" colspan="1">合同到期时间</td>
              <td width="23%" colspan="2">
                <el-date-picker
                  v-model="laborcontractEnd"
                  type="date"
                  placeholder
                  @change="duetimefn()"
                ></el-date-picker>
              </td>
              <td width="10%" colspan="1">提前提醒时间</td>
              <td width="23%" colspan="2">
                <el-date-picker v-model="remind" type="date" placeholder @change="remindfn()"></el-date-picker>
              </td>
            </tr>
          </table>
          <table width="100%">
            <tr class="tr1">
              <td width="100%" colspan="8">最高学历</td>
            </tr>
            <tr class="tr2">
              <td width="25%" colspan="2">起止时间</td>
              <td width="25%" colspan="2">学校/教育机构名称</td>
              <td width="25%" colspan="2">所学专业/技能</td>
              <td width="25%" colspan="2">取得文凭/资格证书</td>
            </tr>
            <tr class="tr3" v-for="(item,index) in xuelival" :key="index">
              <td width="25%" colspan="2">
                <el-date-picker
                  v-model="item.startendtime"
                  type="daterange"
                  width="100%"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  @change="dd"
                ></el-date-picker>
              </td>
              <td width="25%" colspan="2">
                <el-input v-model="item.school"></el-input>
              </td>
              <td width="25%" colspan="2">
                <el-input v-model="item.specialty"></el-input>
              </td>
              <td width="25%" colspan="2">
                <el-input v-model="item.diploma"></el-input>
              </td>
            </tr>
          </table>
          <table width="100%" height="100%">
            <tr>
              <td width="100%" colspan="10">工作履历</td>
            </tr>
            <tr>
              <td width="23%" colspan="2">起止时间</td>
              <td width="24%" colspan="3">公司名称</td>
              <td width="10%" colspan="1">职位</td>
              <td width="10%" colspan="1">薪资</td>
              <td width="10%" colspan="1">离职原因</td>
              <td width="10%" colspan="1">证明人</td>
              <td width="13%" colspan="1">证明人电话</td>
            </tr>
            <tr v-for="(item,index) in workvalue" :key="index">
              <td width="23%" colspan="2">
                <el-date-picker
                  v-model="item.workstartendtime"
                  type="daterange"
                  width="100%"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  @change="gh(index)"
                ></el-date-picker>
              </td>
              <td width="24%" colspan="3">
                <el-input v-model="item.compony"></el-input>
              </td>
              <td width="10%" colspan="1">
                <el-input v-model="item.duty"></el-input>
              </td>
              <td width="10%" colspan="1">
                <el-input v-model="item.salary"></el-input>
              </td>
              <td width="10%" colspan="1">
                <el-input v-model="item.reason"></el-input>
              </td>
              <td width="10%" colspan="1">
                <el-input v-model="item.certifier"></el-input>
              </td>
              <td width="13%" colspan="1">
                <el-input v-model="item.phone"></el-input>
              </td>
            </tr>
            <!-- /////////////////////////////////////////////////////////////////////////////////// -->
            <tr>
              <td width="100%" colspan="10">家庭情况</td>
            </tr>
            <tr>
              <td width="20%" colspan="2">姓名</td>
              <td width="20%" colspan="2">与本人关系</td>
              <td width="20%" colspan="2">出生年月</td>
              <td width="10%" colspan="1">工作单位</td>
              <td width="10%" colspan="1">职务</td>
              <td width="20%" colspan="2">联系电话</td>
            </tr>
            <tr v-for="(item,index,ss) in family" :key="ss">
              <td width="20%" colspan="2">
                <el-input v-model="item.name"></el-input>
              </td>
              <td width="20%" colspan="2">
                <el-input v-model="item.relation"></el-input>
              </td>
              <td width="20%" colspan="2">
                <el-date-picker v-model="item.birth" type="date" placeholder @change="bg(index)"></el-date-picker>
              </td>
              <td width="10%" colspan="1">
                <el-input v-model="item.workunit"></el-input>
              </td>
              <td width="10%" colspan="1">
                <el-input v-model="item.duty"></el-input>
              </td>
              <td width="20%" colspan="2">
                <el-input v-model="item.phone"></el-input>
              </td>
            </tr>
            <!-- ///////////////////////////////////////////////////////////////// -->
            <!-- <tr>
              <td width="100%" colspan="10">培训记录情况</td>
            </tr>
            <tr>
              <td width="20%" colspan="2">起止时间</td>
              <td width="20%" colspan="2">培训内容</td>
              <td width="20%" colspan="2">培训地点</td>
              <td width="20%" colspan="2">培训方式</td>
              <td width="20%" colspan="2">获得证书</td>
            </tr>
            <tr v-for="(item,index,ss) in train" :key="ss">
              <td width="20%" colspan="2">
                <el-date-picker
                  v-model="item.pxtime"
                  type="daterange"
                  width="100%"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  @change="px(index)"
                ></el-date-picker>
              </td>
              <td width="20%" colspan="2">
                <el-input v-model="item.content "></el-input>
              </td>
              <td width="20%" colspan="2">
                <el-input v-model="item.site "></el-input>
              </td>
              <td width="20%" colspan="2">
                <el-input v-model="item.style "></el-input>
              </td>
              <td width="20%" colspan="2">
                <el-input v-model="item.certificate "></el-input>
              </td>
            </tr>

            <tr>
              <td width="100%" colspan="10">奖惩记录</td>
            </tr>
            <tr>
              <td width="20%" colspan="2">何种奖励</td>
              <td width="20%" colspan="2">奖励时间</td>
              <td width="20%" colspan="2">何种惩罚</td>
              <td width="20%" colspan="2">惩罚时间</td>
              <td width="20%" colspan="2">惩罚原因</td>
            </tr>
            <tr v-for="(item,index,ss) in punishmentval" :key="ss">
              <td width="20%" colspan="2">
                <el-input v-model="item.reward "></el-input>
              </td>
              <td width="20%" colspan="2">
                <el-date-picker v-model="item.redate " type="date" placeholder @change="cf(index)"></el-date-picker>
              </td>
              <td width="20%" colspan="2">
                <el-input v-model="item.punishment "></el-input>
              </td>
              <td width="20%" colspan="2">
                <el-date-picker v-model="item.pudate " type="date" placeholder @change="cf1(index)"></el-date-picker>
              </td>
              <td width="20%" colspan="2">
                <el-input v-model="item.reason "></el-input>
              </td>
            </tr>-->
            <tr height="150">
              <td width="10%" colspan="1">合同</td>
              <td width="90%" colspan="9">
                <!-- <el-upload
                  action="/apis/ComApi.asmx/UpImg"
                  list-type="picture-card"
                  :on-success="handleAvatarSuccess1"
                  :on-remove="handleRemove"
                  :limit="5"
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                  <img width="100%" :src="contractImageUrl" alt />
                </el-dialog>-->
                <el-upload
                  :file-list="contractImage"
                  action="/apis/ComApi.asmx/UpImg"
                  list-type="picture-card"
                  :on-remove="function(res,file){ return handleRemove(res,file)}"
                  :on-success="function (res, file) { return handleSuccess1(res, file)}"
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                  <img width="100%" :src="contractImageUrl" alt/>
                </el-dialog>
              </td>
            </tr>
          </table>
        </div>
        <div width="100%" class="btn" v-if="state==0||state==-1">
          <el-button type="primary" size="medium" v-if="state==-1" @click="outstaff()">离职</el-button>
          <el-button type="primary" size="medium" v-if="state==0" @click="addstaff()">确认</el-button>
          <el-button type="info" size="medium" @click="revert(5,4)">返回</el-button>
        </div>
      </div>
    </div>
    <!-- 新增&&编辑员工 -- end-->
    <el-dialog
      title="选择岗位"
      :visible.sync="dialogVisible55"
      width="40%"
      :modal-append-to-body="false"
    >
      <div class="color_box"></div>
      <div>
        <div class="block">
          <span class="demonstration">离职时间</span>
          <el-date-picker
            v-model="lizhi.time"
            type="date"
            placeholder="离职时间"
            style="width:60%;margin-left:10px;"
          ></el-date-picker>
        </div>
        <div class="block" style="margin-top:20px;">
          <span class="demonstration" style="margin-right:10px;">离职原因</span>
          <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4}"
            placeholder="请输入内容"
            v-model="lizhi.reasons"
            class="lizhi"
          ></el-input>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible55 = false">取 消</el-button>
        <el-button type="primary" @click="lizhisure()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import axios from "axios";

export default {
  data() {
    return {
      lizhi: {time: "", reasons: ""},
      creater: 0,
      // imageUrl: "",
      imageUrl1: "",
      dialogImageUrl: "",
      dialogVisible55: false,
      obj: {},

      //

      disabled1: false,
      //
      checkAll2: false,
      checkAll: false, //部门

      imageUrl: "",
      image: "",//头像/后台
      departName: "",
      departId: 0,//部门Id后台参数
      postName: "",
      postId: 0,//岗位Id//后台
      jiXiao: "", //绩效系数/后台参数
      name: "", //姓名/后台
      pass: "123456",//密码/后台
      sexVal: "男",
      sex: 1, //性别/后台
      nation: "汉族",//民族/后台
      birth: "", //出生年月/后台
      nativePlace: "", //籍贯/后台
      marrayVal: "未婚",
      marray: 1, //婚姻状况/后台
      telephone: "", //联系电话/后台
      idNumber: "", //身份证号码/后台
      roleName: "",//岗位名称
      roleCodeList: [], //入职岗位/后台
      permanentaddress: "", //户籍地址/后台
      addressnow: "", //现住址/后台
      sociology: "", //专业社会职称/后台
      getdate: "", //取得时间/后台
      educationMax: "", //最高学历/后台
      graduateUniversity: "", //毕业学校/后台
      major: "", //专业/后台
      graduateDate: "", //毕业时间/后台
      languagegrade: "", //外语水平/后台
      language: "", //语种/后台/后台
      computer: "", //计算机水平/后台
      laborcontractStart: "", //签订合同日期/后台
      laborcontractEnd: "", //合同到期时间/后台
      remind: "", //提前提醒周期/后台
      xuelival: [{start: "", end: "", startendtime: "", school: "", specialty: "", diploma: ""}], //最高学历/后台
      workvalue: [
        {
          start: "",
          end: "",
          workstartendtime: "",
          compony: "",
          duty: "",
          salary: "",
          reason: "",
          certifier: "",
          phone: ""
        },
        {
          start: "",
          end: "",
          workstartendtime: "",
          compony: "",
          duty: "",
          salary: "",
          reason: "",
          certifier: "",
          phone: ""
        },
        {
          start: "",
          end: "",
          workstartendtime: "",
          compony: "",
          duty: "",
          salary: "",
          reason: "",
          certifier: "",
          phone: ""
        },
      ],//工作履历/后台
      family: [
        {name: "", relation: "", birth: "", workunit: "", duty: "", phone: ""},
        {name: "", relation: "", birth: "", workunit: "", duty: "", phone: ""},
        {name: "", relation: "", birth: "", workunit: "", duty: "", phone: ""},
      ],//家庭情况/后台
      contractImageUrl: "",
      contractImage: [],//合同/后台
      dialogVisible: false,
      departList: [],
      roleList: [],
      postList: [],

      age: "", //年龄
      hobby: "", //特长爱好
      workinghours: "", //参加工作时间
      entrytime: "", //可入职时间
      salary: "", //薪资
      remindertime: "", //社保缴纳
      Mark: 0,
      //地址栏传参
      id: 0,
      state: 0,
      // train: [
      //   { pxtime: "", content: "", site: "", style: "", certificate: "" },
      //   { pxtime: "", content: "", site: "", style: "", certificate: "" },
      //   { pxtime: "", content: "", site: "", style: "", certificate: "" },
      // ],//培训情况/后台


      //奖惩记录
      punishmentval: [{}, {}, {}],
      sexvalue: [{value: 1, label: "男"}, {value: 2, label: "女"}],
      postvalue: [],
      nationvalue: [
        {label: "汉族"},
        {label: "蒙古族"},
        {label: "回族"},
        {label: "藏族"},
        {label: "维吾尔族"},
        {label: "苗族"},
        {label: "彝族"},
        {label: "壮族"},
        {label: "布依族"},
        {label: "朝鲜族"},
        {label: "满族"},
        {label: "侗族"},
        {label: "瑶族"},
        {label: "白族"},
        {label: "土家族"},
        {label: "哈尼族"},
        {label: "哈萨克族"},
        {label: "傣族"},
        {label: "黎族"},
        {label: "傈僳族"},
        {label: "佤族"},
        {label: "畲族"},
        {label: "高山族"},
        {label: "拉祜族"},
        {label: "水族"},
        {label: "东乡族"},
        {label: "纳西族"},
        {label: "景颇族"},
        {label: "柯尔克孜族"},
        {label: "土族"},
        {label: "达斡尔族"},
        {label: "仫佬族"},
        {label: "羌族"},
        {label: "布朗族"},
        {label: "撒拉族"},
        {label: "毛南族"},
        {label: "仡佬族"},
        {label: "锡伯族"},
        {label: "阿昌族"},
        {label: "普米族"},
        {label: "塔吉克族"},
        {label: "怒族"},
        {label: "乌孜别克族"},
        {label: "俄罗斯族"},
        {label: "鄂温克族"},
        {label: "德昂族"},
        {label: "保安族"},
        {label: "裕固族"},
        {label: "京族"},
        {label: "塔塔尔族"},
        {label: "独龙族"},
        {label: "鄂伦春族"},
        {label: "赫哲族"},
        {label: "门巴族"},
        {label: "珞巴族"},
        {label: "基诺族"}
      ],
      educationvalue: [
        {label: "初中"},
        {label: "高中"},
        {label: "中专"},
        {label: "大专"},
        {label: "本科"},
        {label: "研究生"},
        {label: "硕士"},
        {label: "博士"}
      ],
      marriagevalue: [{value: 1, label: "未婚"}, {value: 2, label: "已婚"}, {value: 3, label: "离异"}],
      coefficientvalue: [
        {key: 0.8, value: "0.8"},
        {key: 0.9, value: "0.9"},
        {key: 1.0, value: "1.0"},
        {key: 1.1, value: "1.1"},
        {key: 1.2, value: "1.2"}
      ],
      departmentvalue: [],
      pic: [],
      bmpage: false,
      isIndeterminate: true,
      checkedCities: [],
      xaifaval: [],
      isIndeterminate2: true,
      checkedCities2: [],
      xaifaval2: [],
      gangwei: {},
      radio: [],
    };
  },
  created() {
    this.getDepartList();
    this.getpostList();
    this.getroleList();
    this.creater = JSON.parse(localStorage.getItem("message")).Id;
    //地址栏传参
    this.id = this.$route.query.e;
    this.state = this.$route.query.state;
    //获取详情
    if (this.id != 0) {
      this.getDetail();
    }
  },
  methods: {
    //离职
    outstaff() {
      this.dialogVisible55 = true;
    },
    lizhisure() {
      if (this.Mark == 0) {
        if (this.lizhi.time == "") {
          this.$message.error("离职时间非空");
          return;
        }
        ;
        if (this.lizhi.reasons == "") {
          this.$message.error("离职原因非空");
          return;
        }
        ;
        let thetemp = {
          time: this.lizhi.time,//头像/后台
          reasons: this.lizhi.reasons,//部门Id后台参数
          creater: this.creater,
          memId: this.id
        }
        let objs = JSON.stringify(thetemp);
        let the = {
          index: 4, jsondata: objs
        }
        this.Mark = 1;
        axios.post("apis/PersonnelMatters.asmx/Add", the).then(({data}) => {
          var list = JSON.parse(data.d);
          if (list.flag == true) {
            this.$message.success(list.tip);
            this.dialogVisible55 = false;
            this.$router.push({
              path: "/EmployeeInformation",
              query: {index: 5, index2: 4}
            });
          } else {
            this.$message.error(list.tip);
            this.Mark = 0;
          }
        })
          .catch(({error}) => {
            this.$message.error("异常");
            this.Mark = 0;
          });
      }

    },
    //获取详情
    getDetail() {
      var obj = {id: this.id};
      var objs = JSON.stringify(obj);
      axios(
        "/apis/PersonnelMatters.asmx/GetData?index=3&jsondata=" + objs
      ).then(({data}) => {
        var datas = this.$x2js.xml2js(data);
        var list = JSON.parse(datas.string.__text);
        if (list != null) {
          // console.log(list);
          this.imageUrl = list.basemess.Image;
          this.departName = list.departName;
          this.departId = list.basemess.departId;
          this.postName = list.postName;
          this.postId = list.basemess.postId;
          this.jiXiao = list.jixiao;
          this.name = list.basemess.Name;
          this.sexVal = list.sexVal;
          this.sex = list.basemess.sex;
          this.nation = list.basemess.Nation;
          this.birth = list.birth;
          this.nativePlace = list.basemess.Nativeplace;
          this.marrayVal = list.marrayVal;
          this.marray = list.basemess.Marray;
          this.telephone = list.basemess.Telephone;
          this.idNumber = list.basemess.IDnumber;
          this.permanentaddress = list.basemess.Permanentaddress;
          this.addressnow = list.basemess.Addressnow;
          this.roleName = list.roleName;
          this.roleCodeList = list.roleName;
          this.sociology = list.basemess.sociology;
          this.getdate = list.getdate;
          this.educationMax = list.basemess.Educationmax;
          this.graduateUniversity = list.basemess.GraduateUniversity;
          this.major = list.basemess.Major;
          this.graduateDate = list.graduateDate
          this.languagegrade = list.basemess.languagegrade;
          this.language = list.basemess.language;
          this.computer = list.basemess.computer;
          this.laborcontractStart = list.laborcontractStart;
          this.laborcontractEnd = list.laborcontractEnd;
          this.remind = list.remind;
          this.xuelival = list.xueli;
          for (var i = 0; i < this.xuelival.length; i++) {
            this.xuelival[i].startendtime = [];
            this.xuelival[i].startendtime.push(this.xuelival[i].start);
            this.xuelival[i].startendtime.push(this.xuelival[i].end);
          }
          this.workvalue = list.work;
          for (var i = 0; i < this.workvalue.length; i++) {
            this.workvalue[i].workstartendtime = [];
            this.workvalue[i].workstartendtime.push(this.workvalue[i].start);
            this.workvalue[i].workstartendtime.push(this.workvalue[i].end);
          }
          this.family = list.family;
          for (var i = 0; i < list.contractImage.length; i++) {
            if (list.contractImage[i] != "") {
              this.contractImage.push({status: "success", uid: this.guid(), url: list.contractImage[i]});
            }
          }
          //this.contractImageUrl = this.contractImage;
        }
      });
    },
    //获取部门
    getDepartList() {
      var obj = {id: 4};
      var objs = JSON.stringify(obj);
      axios(
        "/apis/ComApi.asmx/GetData?index=1&jsondata=" + objs
      ).then(({data}) => {
        var datas = this.$x2js.xml2js(data);
        var list = JSON.parse(datas.string.__text);
        this.departList = list;
      });
    },
    // 选择部门获取departCode
    departChange(e) {
      if (e) {
        this.departId = e;
      } else {
        this.departId = 0;
      }
    },
    //获取角色列表
    getroleList() {
      var obj = {};
      var objs = JSON.stringify(obj);
      axios(
        "/apis/PersonnelMatters.asmx/GetData?index=1&jsondata=" + objs
      ).then(({data}) => {
        var datas = this.$x2js.xml2js(data);
        var list = JSON.parse(datas.string.__text);
        this.roleList = list;
      });
    },
    //获取岗位列表
    getpostList() {
      var obj = {};
      var objs = JSON.stringify(obj);
      axios(
        "/apis/ComApi.asmx/GetData?index=2&jsondata=" + objs
      ).then(({data}) => {
        var datas = this.$x2js.xml2js(data);
        var list = JSON.parse(datas.string.__text);
        this.postList = list;
      });
    },
    //选择岗位
    postChange(e) {
      if (e) {
        this.postId = e;
      }
    },
    //选择角色
    roleChange(e) {
      if (e) {
        this.roleCodeList = e;
      }
    },
    // 选择性别
    sexChange(e) {
      if (e) {
        this.sex = e;
      } else {
        this.sex = 1;
      }
    },
    //选择婚姻状况
    marryChange(e) {
      if (e) {
        this.marray = e;
      }
    },
    //图片上传
    // handleRemove (file, fileList) {
    //   console.log(file, fileList);
    //   let url = this.$x2js.xml2js(file.response).UpFileReturn.fullurl;
    //   if (this.contractImage.indexOf(url) < 0 == false) {
    //     this.contractImage.splice(this.contractImage.indexOf(url), 1);
    //   }
    // },
    handleAvatarSuccess(res, file) {
      let URL = window.URL || window.webkitURL;
      this.imageUrl = URL.createObjectURL(file.raw);
      var datas = this.$x2js.xml2js(res);
      this.image = datas.UpFileReturn.fullurl
      //console.log(datas.UpFileReturn.fullurl, "touxiang")
    },
    S4() {
      return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
    },
    guid() {
      return this.S4() + this.S4() + this.S4() + this.S4();
    },
    handleRemove(res, file) {
      let filelist = this.contractImage;
      for (let ind = 0; ind < filelist.length; ind++) {
        const element = filelist[ind];
        if (element.uid == res.uid) {
          filelist.splice(ind, 1);
        }
      }
      this.contractImage = filelist;
    },
    handleSuccess1(response, file) {
      console.log(response, file)
      var datas = this.$x2js.xml2js(response);
      var url = "" + datas.UpFileReturn.fullurl;
      this.contractImage.push({
        status: "success", uid: file.uid, src: url, url: url
      });
      //console.log(this.contractImage)
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    //提前提醒时间
    remindfn() {
      this.remind =
        this.remind.getFullYear() +
        "-" +
        (this.remind.getMonth() + 1) +
        "-" +
        this.remind.getDate() +
        " ";
    },
    //到期时间
    duetimefn() {
      this.laborcontractEnd =
        this.laborcontractEnd.getFullYear() +
        "-" +
        (this.laborcontractEnd.getMonth() + 1) +
        "-" +
        this.laborcontractEnd.getDate() +
        " ";
    },
    //签到时间
    signingtimefn() {
      this.laborcontractStart =
        this.laborcontractStart.getFullYear() +
        "-" +
        (this.laborcontractStart.getMonth() + 1) +
        "-" +
        this.laborcontractStart.getDate() +
        " ";
    },
    //毕业时间
    graduationtimefn() {
      this.graduateDate =
        this.graduateDate.getFullYear() +
        "-" +
        (this.graduateDate.getMonth() + 1) +
        "-" +
        this.graduateDate.getDate() +
        " ";
    },
    //取得时间
    getdatefn() {
      this.getdate =
        this.getdate.getFullYear() +
        "-" +
        (this.getdate.getMonth() + 1) +
        "-" +
        this.getdate.getDate() +
        " ";
    },
    //获取出生年月时间
    dateofbirthfn() {
      this.birth =
        this.birth.getFullYear() +
        "-" +
        (this.birth.getMonth() + 1) +
        "-" +
        this.birth.getDate() +
        " ";
    },
    //获取惩罚时间
    cf(index) {
      var cfval = [];
      for (var i = 0; i < this.punishmentval.length; i++) {
        let item = this.punishmentval[index].redate;
        let lett =
          item.getFullYear() +
          "-" +
          (item.getMonth() + 1) +
          "-" +
          item.getDate() +
          " ";
        cfval.push(lett);
      }
      if (index == 0) {
        this.punishmentval[0].redate = cfval[0];
      }
      if (index == 1) {
        this.punishmentval[1].redate = cfval[1];
      }
      if (index == 2) {
        this.punishmentval[2].redate = cfval[2];
      }
    },
    cf1(index) {
      var cf1val = [];
      for (var i = 0; i < this.punishmentval.length; i++) {
        let item = this.punishmentval[index].pudate;
        let lett =
          item.getFullYear() +
          "-" +
          (item.getMonth() + 1) +
          "-" +
          item.getDate() +
          " ";
        cf1val.push(lett);
      }
      if (index == 0) {
        this.punishmentval[0].pudate = cf1val[0];
      }
      if (index == 1) {
        this.punishmentval[1].pudate = cf1val[1];
      }
      if (index == 2) {
        this.punishmentval[2].pudate = cf1val[2];
      }
    },
    //获取工资履历起止时间
    gh(index) {
      var gui = [];
      for (var i = 0; i < this.workvalue.length; i++) {
        this.workvalue[index].workstartendtime.forEach(item => {
          let lett =
            item.getFullYear() +
            "-" +
            (item.getMonth() + 1) +
            "-" +
            item.getDate() +
            " ";
          gui.push(lett);
        });
      }
      if (index == 0) {
        this.workvalue[0].start = gui[0];
        this.workvalue[0].end = gui[1];
      }
      if (index == 1) {
        this.workvalue[1].start = gui[2];
        this.workvalue[1].end = gui[3];
      }
      if (index == 2) {
        this.workvalue[2].start = gui[4];
        this.workvalue[2].end = gui[5];
      }
    },
    //获取培训起止时间
    px(index) {
      var pxval = [];
      for (var i = 0; i < this.train.length; i++) {
        this.train[index].pxtime.forEach(item => {
          let lett =
            item.getFullYear() +
            "-" +
            (item.getMonth() + 1) +
            "-" +
            item.getDate() +
            " ";
          pxval.push(lett);
        });
      }
      if (index == 0) {
        this.train[0].start = pxval[0];
        this.train[0].end = pxval[1];
      }
      if (index == 1) {
        this.train[1].start = pxval[2];
        this.train[1].end = pxval[3];
      }
      if (index == 2) {
        this.train[2].start = pxval[4];
        this.train[2].end = pxval[5];
      }
    },
    //获取最高学历起止时间
    dd() {
      var xlval = [];
      console.log(this.xuelival[0].startendtime)
      for (var i = 0; i < 1; i++) {
        this.xuelival[0].startendtime.forEach(item => {
          let lett =
            item.getFullYear() +
            "-" +
            (item.getMonth() + 1) +
            "-" +
            item.getDate() +
            " ";
          xlval.push(lett);
        });
      }

      this.xuelival[0].start = xlval[0];
      this.xuelival[0].end = xlval[1];
    },
    //获取家庭情况生日
    bg(index) {
      var ge = [];
      for (var i = 0; i < this.family.length; i++) {
        let item = this.family[index].birth;
        let lett =
          item.getFullYear() +
          "-" +
          (item.getMonth() + 1) +
          "-" +
          item.getDate() +
          " ";
        ge.push(lett);
      }
      if (index == 0) {
        this.family[0].birth = ge[0];
      }
      if (index == 1) {
        this.family[1].birth = ge[1];
      }
      if (index == 2) {
        this.family[2].birth = ge[2];
      }
    },
    //新增员工
    addstaff() {
      if (this.Mark == 0) {
        if (this.departId == 0) {
          this.$message.error("部门非空");
          return;
        }
        ;
        if (this.postId == 0) {
          this.$message.error("岗位非空");
          return;
        }
        ;
        if (this.jiXiao == "") {
          this.$message.error("绩效非空");
          return;
        }
        ;
        if (this.name == "") {
          this.$message.error("姓名非空");
          return;
        }
        ;
        if (this.telephone == "") {
          this.$message.error("联系电话非空");
          return;
        }
        ;
        if (this.idNumber == "") {
          this.$message.error("身份证非空");
          return;
        }
        ;
        var roleCodeList = "";
        if (this.roleCodeList.length <= 0) {
          this.$message.error("岗位非空");
          ;
          return;
        }
        if (this.addressnow == "") {
          this.$message.error("现住址非空");
          return;
        }
        ;
        let contractImage = "";
        if (this.contractImage.length > 0) {
          for (var i = 0; i < this.contractImage.length; i++) {
            contractImage += this.contractImage[i].url + "@";
          }
        }
        let xuelival = [];
        for (var i = 0; i < this.xuelival.length; i++) {
          this.xuelival[i].startendtime = "";
          xuelival.push(this.xuelival[i]);
        }
        let workvalue = [];
        for (var i = 0; i < this.workvalue.length; i++) {
          this.workvalue[i].workstartendtime = "";
          workvalue.push(this.workvalue[i]);
        }
        let thetemp = {
          image: this.image,//头像/后台
          departId: this.departId,//部门Id后台参数
          postId: this.postId,
          jiXiao: this.jiXiao, //绩效系数/后台参数
          name: this.name, //姓名/后台
          pass: this.pass,//密码/后台
          sex: this.sex, //性别/后台
          nation: this.nation,//民族/后台
          birth: this.birth, //出生年月/后台
          nativePlace: this.nativePlace, //籍贯/后台
          marray: this.marray, //婚姻状况/后台
          telephone: this.telephone, //联系电话/后台
          idNumber: this.idNumber, //身份证号码/后台
          permanentaddress: this.permanentaddress, //户籍地址/后台
          addressnow: this.addressnow, //现住址/后台
          sociology: this.sociology, //专业社会职称/后台
          getdate: this.getdate, //取得时间/后台
          educationMax: this.educationMax, //最高学历/后台
          graduateUniversity: this.graduateUniversity, //毕业学校/后台
          major: this.major, //专业/后台
          graduateDate: this.graduateDate, //毕业时间/后台
          languagegrade: this.languagegrade, //外语水平/后台
          language: this.language, //语种/后台/后台
          computer: this.computer, //计算机水平/后台
          laborcontractStart: this.laborcontractStart, //签订合同日期/后台
          laborcontractEnd: this.laborcontractEnd, //合同到期时间/后台
          remind: this.remind, //提前提醒周期/后台
          contractImage: contractImage,//合同/后台
        }

        var creater = JSON.parse(localStorage.getItem("message")).Id;
        let objs = {
          id: this.id,
          temp: thetemp,
          roleCodeList: this.roleCodeList, //入职岗位/后台
          xuelival: xuelival, //最高学历/后台
          workvalue: workvalue,//工作履历/后台
          family: this.family,//家庭情况/后台
          creater: creater
        };
        let objss = JSON.stringify(objs);
        console.log(objss);
        let the = {
          index: 1, jsondata: objss
        }
        this.Mark = 1;
        axios.post("apis/PersonnelMatters.asmx/Add", the).then(({data}) => {
          // axios.post("apis/PersonnelMatters.asmx/Add?index=1&jsondata=" + objss).then(({ data }) => {
          //var datas = this.$x2js.xml2js(data);
          var list = JSON.parse(data.d);
          if (list.flag == true) {
            this.$message.success(list.tip);
            this.$router.push({
              path: "/EmployeeInformation",
              query: {index: 5, index2: 4}
            });
          } else {
            this.$message.error(list.tip);
            this.Mark = 0;
          }
        })
          .catch(({error}) => {
            this.$message.error("异常");
            this.Mark = 0;
          });
      }
    },
    //返回
    revert(index, index2) {
      this.$router.push({
        path: "/EmployeeInformation",
        query: {index: index, index2: index2}
      });
    }
  }
};
</script>
<style lang="scss" scoped>
@import '@/assets/scss/base.scss';

.block {
  display: flex;
  align-items: center;
}

.lizhi {
  width: 60%;
  margin-left: 10px;
}

ul li {
  margin-top: 10px;

  span {
    display: inline-block;
    width: 100px;
  }
}

.color_box {
  width: 5px;
  height: 20px;
  background-color: $blue;
  position: absolute;
  top: 22px;
  left: 10px;
}

.nav {
  //border: solid 1px red;
  height: 60px;
  padding: 0 1%;
  position: relative;

  p {
    height: 40px;
    margin: 10px 0;
    line-height: 40px;

    span {
      background: $Header_color;
      color: $Header_color;
    }
  }

  #nav_go5 {
    position: absolute;
    top: 10px;
    right: 1%;

    img {
      height: 16px;
      padding-right: 10px;
    }
  }
}

.contaner_staff {
  background: $white;
  display: flex;
  margin: 0 1%;
  justify-content: space-between;
}

table {
  border-collapse: collapse;
  text-align: center;
  color: rgb(128, 129, 131);
}

table tr td {
  height: 50px;
  border: solid 1px rgb(180, 181, 184);
}

#head_portrait {
  width: 13%;
  padding-left: 1%;
  text-align: center;
  // border: solid 1px red;
}

#table_box44 {
  width: 84%;
  height: 800px;
  // overflow: auto;
  background: $white;
}

.basemess {
  width: 95%;
  overflow: auto;
  height: 700px;
  margin-top: 20px;
}

.btn {
  text-align: center;
  margin-top: 20px;
}

.tr1 td {
  border-top: none;
  border-left: solid 1px rgb(180, 181, 184);
  border-right: solid 1px rgb(180, 181, 184);
}

.tr2 td {
  border: solid 1px rgb(180, 181, 184);
}

.tr3 td {
  border: solid 1px rgb(180, 181, 184);
  border-bottom: none;
}

.log {
  height: 148px;
  margin-top: 10px;
}

.bmpage {
  //border: solid 1px red;
}

#log_bottom1 {
  height: 100px;
  padding-top: 10px;
  //border: solid 1px red;
}

.bottom {
  background: $white;
  text-align: center;
  margin-top: 10px;
}
</style>
<style>
#table_box44 .el-input__inner {
  border: none;
  color: rgb(128, 129, 131);
  /* font-size: 12px; */
  width: 100%;
}

#table_box44 .el-select {
  width: 100%;
}

#table_box44 .el-select,
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100%;
}

#log_bottom1 .el-select .el-input__inner {
  text-align: center;
  margin-top: 10px;
}

#table_box13 .avatar-uploader {
  height: 300px;
}

#head_portrait .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

#head_portrait .avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

#head_portrait .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  line-height: 150px;
  text-align: center;
}

#head_portrait .avatar {
  width: 150px;
  height: 150px;
  display: block;
}

.el-dialog__footer {
  text-align: center;
}
</style>
